<template>
	<div @click="lock" class="lock-screen-btn-con">
		<Tooltip :content="L('LockScreen')" placement="bottom">
			<!-- <Icon type="locked" :size="20"></Icon> -->
			<i class="iconfont" style="font-size:20px">&#xe6c0;</i>
		</Tooltip>
	</div>
</template>

<script lang="ts">
	import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
	import AppBase from "../../core/utils/AppBase";
	import Utils from "../../core/utils/Utils";
	@Component
	export default class LockScreen extends AppBase {
		name = "lockScreen";
		lockScreenSize = 0;
		showUnlock = false;
		@Prop({ type: Boolean, default: false }) value!: boolean;

		lock() {
			const lockScreenBack = document.getElementById(
				"lock_screen_back"
			) as HTMLElement;
			if (lockScreenBack) {
				lockScreenBack.style.transition = "all 3s";
				lockScreenBack.style.zIndex = "10000";
				lockScreenBack.style.boxShadow =
					"0 0 0 " + this.lockScreenSize + "px #667aa6 inset";
				this.showUnlock = true;
				const name = this.$route.name ? this.$route.name : "";
				Utils.setCookieValueS("last_page_name", name);
				setTimeout(() => {
					lockScreenBack.style.transition = "all 0s";
					this.$router.push({
						name: "locking"
					});
				}, 800);
				Utils.setCookieValueS("locking", "1");
			}
		}
		mounted() {
			const lockdiv = document.createElement("div");
			lockdiv.setAttribute("id", "lock_screen_back");
			lockdiv.setAttribute("class", "lock-screen-back");
			document.body.appendChild(lockdiv);
			const lockScreenBack = document.getElementById(
				"lock_screen_back"
			) as HTMLElement;
			const x = document.body.clientWidth;
			const y = document.body.clientHeight;
			const r = Math.sqrt(x * x + y * y).toString();
			const size = parseInt(r);
			this.lockScreenSize = size;
			window.addEventListener("resize", () => {
				const x = document.body.clientWidth;
				const y = document.body.clientHeight;
				const r = Math.sqrt(x * x + y * y).toString();
				const size = parseInt(r);
				this.lockScreenSize = size;
				lockScreenBack.style.transition = "all 0s";
				lockScreenBack.style.width = lockScreenBack.style.height = size + "px";
			});
			lockScreenBack.style.width = lockScreenBack.style.height = size + "px";
		}
	}
</script>

